<template>
    <div class="article-item-container">
        <van-cell
            :to="`/article/${article.art_id}`"
        >
            <div slot="title" class="van-multi-ellipsis--l3">{{article.title}}</div>
            <div slot="label">
                <div class="cover-nowrap" v-if="article.cover.type === 3">
                    <van-image
                        class="cover-nowrap-item"
                        fit="cover"
                        v-for="(img, index) in article.cover.images"
                        :key="index"
                        :src="img"
                        referrerPolicy="no-referrer"
                    />
                </div>
                <div class="label-nowrap">
                    <span>{{ article.aut_name }}</span>
                    <span>{{ article.comm_count }}评论</span>
                    <span>{{ article.pubdate | relativeTime }}</span>
                </div>
            </div>
            <div slot="default" v-if="article.cover.type === 1">
                <van-image
                    fit="cover"
                    :src="article.cover.images[0]"
                />
            </div>
        </van-cell>
    </div>
</template>

<script>

export default {
    components: {
    },
    props: {
        article: {
            type: Object,
            require: true
        }
    },
    // 定义属性
    data() {
        return {
        };
    },
    // 计算属性，会监听依赖属性值随之变化
    computed: {
    },
    // 监控data中的数据变化
    watch: {},
    // 方法集合
    methods: {
    },
    // 生命周期 - 创建完成（可以访问当前this实例）
    created() {
    },
    // 生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
    }
};
</script>

<style lang='less' scoped>
.article-item-container {
    .van-cell {
        .van-cell__title {
            font-size: 16px;
            color: #3a3a3a;
            flex: 2;
            padding-right: 10px;
            // .van-cell__label {
            //     // margin-top: 25px;
            // }
        }
        .van-cell__value {
            height: 73px;
        }
    }
    .cover-nowrap {
        display: flex;
        align-items: center;
        height: 73px;
        .cover-nowrap-item {
            flex: 1;
            overflow: hidden;
            height: 100%;
        }
    }
    .label-nowrap {
        margin-top: 25px;
        font-size: 11px;
        color: #b4b4b4;
        span {
            margin-right: 5px;
        }
    }
}
</style>
